<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>LED_handle2</title>
    <style>
        /* 灯泡容器 */
        .bulb-container {
            position: relative;
            width: 150px;
            height: 250px;
            margin: 50px auto;
            text-align: center;
            cursor: pointer;
        }

        /* 灯泡玻璃部分 */
        .bulb-glass {
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1) 70%, transparent);
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 2;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* 点亮状态 */
        .bulb-glass.on {
            background: radial-gradient(circle, rgba(255, 255, 0, 0.8), rgba(255, 215, 0, 0.6) 70%, transparent);
            box-shadow: 0 0 40px yellow, 0 0 80px rgba(255, 255, 0, 0.8);
        }

        /* 灯泡底座 */
        .bulb-base {
            width: 80px;
            height: 100px;
            background: linear-gradient(to bottom, #6c6c6c, #4d4d4d); /* 改为灰色渐变 */
            border-radius: 10px 10px 20px 20px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }

        /* 点亮时的灯丝效果 */
        .bulb-filament {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 50px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            display: none;
        }

        /* 点亮时显示灯丝 */
        .bulb-glass.on + .bulb-filament {
            display: block;
            background: yellow;
            box-shadow: 0 0 20px yellow;
        }
    </style>
</head>

<body>
    <center>
        <!-- 灯泡 -->
        <div class="bulb-container" onclick="toggleLED()">
            <div id="bulbGlass" class="bulb-glass"></div>
            <div class="bulb-filament"></div>
            <div class="bulb-base"></div>
            <div class="bulb-screw"></div>
        </div>
        <!-- LED状态 -->
        <div>
            灯泡状态 : <span id="LEDState">NA</span><br>
        </div>
    </center>

    <script>
        // 切换LED状态
        function toggleLED() {
            var bulb = document.getElementById("bulbGlass");
            var ledState = bulb.classList.contains("on") ? 0 : 1; // 当前是点亮则关闭，否则点亮

            // 更新灯泡颜色
            if (ledState === 1) {
                bulb.classList.add("on");
            } else {
                bulb.classList.remove("on");
            }

            // 发送请求到服务器
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("LEDState").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "setLED?LEDstate=" + ledState, true);
            xhttp.send();
        }
    </script>
</body>

</html>  